
<template>
    <div class="app-container">

        <!-- 表格查询 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <!-- 店铺名称 -->
          <el-form-item label="平台编码" prop="platformCode">
              <el-input
                  v-model="queryParams.platformCode"
                  placeholder="请输入平台编码"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
          </el-form-item>
          <el-form-item label="平台名称" prop="platformName">
              <el-input
                  v-model="queryParams.platformName"
                  placeholder="请输入平台名称"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
          </el-form-item>
          <el-form-item label="平台分类" prop="platformType">
            <el-select v-model="queryParams.platformType" placeholder="请选择平台分类" filterable @change="handleChange">
              <el-option v-for="item in dict.type.platform_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="enabled">
            <el-select v-model="queryParams.enabled" placeholder="请选择状态">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>

          </el-form-item>
          
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 表头操作 -->
        <el-row :gutter="10"  class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增</el-button>
            </el-col>
            <!-- <right-toolbar @queryTable="getList"></right-toolbar> -->
        </el-row>

        <!-- 表格数据 -->
        <vxe-table
          border
          stripe
          v-loading="loading" 
          ref="tableRef"
          size="small"
          header-align="center"
          :row-config="rowConfig"
          :column-config="columnConfig"
          @checkbox-change="checkboxChangeEvent"
          @checkbox-all="checkboxAll"
          @cell-click="cellClickEvent"
          :data="tableDataList"
        >
          <!-- <vxe-column type="checkbox" width="80" fixed="left" drag-sort /> -->
          <vxe-column type="seq" title="序号" width="60" fixed="left" align="center" />
          <vxe-column field="platformCode" show-overflow="title" align="center" title="平台编码" />
          <vxe-column field="platformName" show-overflow="title" align="center" title="平台名称"  />
          <vxe-column field="platformTypeName" show-overflow="title" align="center" title="平台分类" />
          <vxe-column field="remark" show-overflow="title" align="center" title="备注" />
          <vxe-column field="createTime"  show-overflow="title" align="center" title="创建时间" />
          <vxe-column field="enabled" show-overflow="title" align="center" title="状态" >
            <template #default="{ row }">
              <el-tag :type="row.enabled ? 'success' : 'danger'">
                {{ row.enabled ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </vxe-column>
          <vxe-column width="180" align="center" title="操作" fixed="right">
              <template #default="{ row }">
                  <el-button
                      size="mini"
                      type="text"
                      @click="handleUpdate(row)"
                  >
                      修改
                  </el-button>
              </template>
          </vxe-column>
        </vxe-table>

        <!-- 分页 -->
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  
        <!-- 新增弹窗 -->
        <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="60%" append-to-body @close="cancel">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="平台名称" prop="platformName" required>
                            <el-input v-model="form.platformName" placeholder="请输入平台名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="平台编码" prop="platformCode" required>
                            <el-input v-model="form.platformCode" placeholder="请输入平台编码" :disabled="form.id" />
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                        <el-form-item label="平台分类" prop="platformType" required>
                            <el-select v-model="form.platformType" placeholder="请选择平台分类" filterable>
                                <el-option v-for="item in dict.type.platform_type" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                      <!-- // 平台选择电商后，电商平台分类才展示 -->
                      <el-form-item label="电商平台分类" prop="ecPlatformType" required v-if="form.platformType === 'ECommerce'">
                        <el-select v-model="form.ecPlatformType" placeholder="请选择电商平台分类" filterable>
                          <el-option v-for="item in dict.type.ec_platform_type" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="备注" prop="remark">
                      <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
                    </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="状态" prop="enabled">
                    <el-switch
                      v-model="form.enabled"
                    />
                  </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">
                    {{  form.clientId ? '保 存' : '确 定' }}
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { 
    listPlatforms,
    addPlatform,
    editPlatform,
    getPlatform
   } from "@/api/mes/sales/platform";
  
  export default {
    name: 'Platform',
     dicts: ['platform_type', 'ec_platform_type'],
    data() {
      return {
        title: '',
        open: false,
        loading: false,
        total: 0,
        form: {
            enabled: true,
        },
        rules: {
            platformCode:[{ required: true, message: '请输入平台编码', trigger: 'blur' }],
            platformName:[{ required: true, message: '请输入平台名称', trigger: 'blur' }],
            platformType:[{ required: true, message: '请选择平台分类', trigger: 'blur' }],
            ecPlatformType:[{ required: true, message: '请选择电商平台分类', trigger: 'blur' }],
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // 只保留实际用到的查询参数
        },
        tableDataList: [],
        columnConfig: {
          drag: true,
          resizable: true,
          storage: true,
          sortConfig: {
            trigger: 'cell',
            remote: true
          },
          align: 'center',
          headerAlign: 'center'
        },
        rowConfig: {
          drag: true,
          keyField: 'clientId',
          isHover: true,
          isCurrent: true,
        },
        ids: [], //选中的条目
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(){
        this.loading = true;
        listPlatforms(this.queryParams).then(response => {
          this.tableDataList = response.rows;
          this.$nextTick(() => {
            this.$refs.tableRef.setCurrentRow(this.tableDataList[0]);
          })
          if(response.rows?.length>0){
            this.cellId = response.rows[0].clientId;
          }
          this.total = response.total;
          console.log(response);
        }).finally(() => {
          this.loading = false;
        })
      },
      handleAdd(){
        this.form = {
          enabled: true,
        };
        this.title = '新增';
        this.open = true;
      },
      handleUpdate(row){
        this.title = '修改';
        this.form = { 
            ...row,
        };
        this.open = true;
      },
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },
      resetQuery(){
        this.resetForm("queryForm");
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          poCode: null,
          vendorNick: null,
          poStatusList: undefined,
          poCheckStatusList: undefined,
        },
        this.getList();
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            const params = {
                ...this.form,
            }
            if (this.form.clientId) {
                editPlatform(params).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                });
            } else {
              addPlatform(params).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        })
      },
      cancel(){
        this.$refs["form"].resetFields();
        this.form = {};
        this.open = false;
      },
      cellClickEvent({row}){
        this.cellId = row.clientId;
        this.handleClick({name:'1'})
      },
      checkboxChangeEvent(checked){
        this.ids = checked.records.map(item => item.clientId)
      },
      checkboxAll(checked){
        this.ids = checked.records.map(item => item.clientId)
      },
      handleClick(tab, event) {
        switch (tab.name) {
          case '1':
            // console.log('基础信息');
            break;
          case '2':
            console.log('2');
            break;
          default:
            break;
        }
      },
  // ...existing code...
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .el-select{
      width: 100%;
    }
  </style>